import React, { useState } from 'react'
import { Row, Col, Form } from 'antd'
import PropTypes from 'prop-types'
import Text from '@components/Text'
import style from './FeeShow.module.less'
import ModifyFeeModal from './ModifyFeeModal'
import { CaseContext } from '../context'
const { Item } = Form

// 获取数字中文单位
function getCnUnit (v) {
  const list = ['个', '十', '百', '千', '万', '十万', '百万', '千万', '亿', '十亿', '百亿', '千亿', '兆', '十兆', '百兆', '千兆']
  if (!v) {
    return list[0]
  }
  const money = String(Math.floor(v))
  return list[money.length - 1]
}

// 格式化金钱单位
function formaterMoneyToStr (v) {
  if (!v) {
    return 0
  }
  return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

// 争议金额显示器
function DisputeAmountShower ({ value }) {
  return (
    <div className={style['money-shower']}>
      <div className={style['money-number']}>
        {formaterMoneyToStr(value)}
      </div>
      <div className={style['money-cn']}>
        {getCnUnit(value)}
      </div>
    </div>
  )
}

// 费用行
function FeeLine () {
  return (
    <div className={style['fee-line']}>
      <span>受理费 </span>
      <Item noStyle name={['claim', 'fee_acceptance']}><Text /></Item>
      <span> + 处理费 </span>
      <Item noStyle name={['claim', 'fee_processing']}><Text /></Item>
      <span> = 应收金额 </span>
      <Item noStyle name={['claim', 'fee']}><Text /></Item>
    </div>
  )
}

function Main ({ caseFormRef }) {
  const [visible, setVisible] = useState(false)
  return (
    <CaseContext.Consumer>
      {({ disabled, isModify }) => (
        <>
          <Row>
            <Col span={6} />
            <Col span={8}>
              <Item name={['claim', 'dispute_amount']} label='争议金额'>
                <DisputeAmountShower />
              </Item>
            </Col>
          </Row>
          <Row>
            <Col span={6} />
            <Col span={8}>
              <Item label=' ' colon={false}>
                <FeeLine />
              </Item>
            </Col>
            <Col span={1}>
              {!disabled && !isModify ? <a className={style['modify-btn']} onClick={() => setVisible(true)}>修改</a> : null}
            </Col>
            <ModifyFeeModal visible={visible} caseFormRef={caseFormRef} hide={() => setVisible(false)} />
          </Row>
        </>
      )}
    </CaseContext.Consumer>
  )
}

Main.propTypes = {
  caseFormRef: PropTypes.object
}

Main.defaultProps = {
  caseFormRef: null
}

export default Main
